<template>
  <el-table :data="tableData" style="width: 90%" class="table">
    <el-table-column fixed prop="order_number" label="订单号" width="150" />
    <el-table-column label="商品预览" width="120" >
      <!-- 图片的显示 -->
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <img :src="'data:image/png;base64'+scope.row.url" width="100" height="100"/>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="good_specific" label="商品种类" width="150" />
    <el-table-column prop="pet_name" label="商品名称" width="150" />
    <el-table-column prop="product_number" label="商品数量" width="150" />
    <el-table-column prop="pay" label="是否付款" width="120" />
    <el-table-column prop="order_date" label="订单生成日期" width="120" />
    <el-table-column prop="deliver" label="是否已发送" width="120" />
    <el-table-column prop="deliver_date" label="发货日期" width="120" />
    <el-table-column prop="phone" label="手机号" width="120" />
    <el-table-column prop="total_count" label="金额" width="120"/>
    <el-table-column prop="address" label="地址" width="400"/>
    <el-table-column prop="remarks" label="备注" width="300"/>
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="Detail(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <SplitPage :total_number="number" :page_size="5" @onPageChange="PageChange" class="splitBtn"/>
</template>

<script>
import SplitPage from "@/components/Personal/SplitPage";
export default {
  name: "OrderPay",
  inject:['reload'],
  components: {
    SplitPage
  },
  methods: {
    Detail(row){
      this.orderShow.id = row.order_number
      this.orderShow.fromPage = 4
      this.$router.push({path:"/list",query:{order:JSON.stringify(this.orderShow)}})
      this.reload()
    },
    PageChange(newPage){
      this.tableData=this.allData.slice(newPage*5-5,newPage*5>this.allData.length?this.allData.length:newPage*5)
    }
  },
  data() {
    return {
      current_page:1,
      number:0,
      allData:[],//全部已发货订单
      tableData:[],//要展示的页包含的订单
      user:{},
      orderShow:{}
    }
  },
  mounted() {
    this.user=JSON.parse(localStorage.getItem("user"))
    this.$axios
        .get(`${this.$target}/order/`+this.user.id)
        .then(res => {
          var dataArr=[]//已发货的订单数据列表
          for(var i=0;i<res.data.data.length;i++){
            if(res.data.data[i].pay) {
              res.data.data[i].deliver=res.data.data[i].deliver?"已发货":"未发货"
              res.data.data[i].pay="已付款"
              if(res.data.data[i].remarks===null||res.data.data[i].remarks===""){
                res.data.data[i].remarks="无"
              }
              dataArr.push(res.data.data[i])
            }
          }
          this.number=dataArr.length
          this.allData=dataArr
          this.tableData=this.allData.slice(0,5)
        })
  }
}
</script>

<style scoped>
.table {
  position: relative;
  left: 60px;
  margin-top: 60px;
}
.splitBtn {
  position: relative;
  left:70%;
  margin-top: 40px;
  width: fit-content;
}
</style>